@charset "UTF-8";
/* File: style.css */
/* Website: acts-public.github.io */
/* Version: 2025-08-05-A */
/* Nxx = Notes */
/* N01.1-Closed: '@media handheld' from Media Query 3 used for Dynamic Class Attributes deprecated at Media Query 4 */
/* N01.2-Closed: '@media orientation' from Media Query 4 now used for Dynamic Class Attributes */
/* N01.3-Open: Does Not render quote properly on Handheld: 'background-color: aliceblue' ignored */
/* N02.1-Open: Review use of em & px, consider rem & vw */

/* Reset Generic Attributes, as some Browsers make false assumptions */
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* For all BODY of HTML document, unless overridden by more specific selectors */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
}

/* For all H1 elements */
h1 {
  text-align: center;
  color: red; 
  font-size: 4em;
  font-weight: bold;
}

/* For all H2 elements */
h2 {
  text-align: center;
  color: blue; 
  font-size: 3em;
  font-weight: bold;
}

/* For all H3 elements */
h3 {
  text-align: center;
  color: blue; 
  font-size: 2em;
  font-weight: bold;
}

/* For all H4 elements */
h4 {
  text-align: center;
  color: red; 
  font-size: 1em;
  font-weight: bold;
}

/* For all List elements */
ul, ol {
  padding-inline-start: 30px;
}

/* Define Class <... class=xxx> attributes (.xxx), primarily used for applying the same styling to a group of elements */
/* Dynamic Class <... class=xxx> attributes (.xxx) based on Media Query */

@media (orientation: landscape) {
  .header{
    position: sticky;
    top: 0;
    background-color: aliceblue;
    width:100%;
    height:100px;
    text-align: center;
  }
  
  .sidebar{
    float:left;
    width:15%;
    background-color: aliceblue;
    min-height: 550px;
    text-indent: 0;
    position: relative;
    left: 5px;
  }

  .main{
    float:left;
    width:75%;
    background-color: white;
    text-indent: 0;
    position: relative;
    left: 20px;
  }
}

@media (orientation: potrait) {
  .header{
    position: sticky;
    top: 0;
    background-color: aliceblue;
    width:100%;
    height:150px;
    text-align: center;
  }
  
  .sidebar{
    float:left;
    width:20%;
    background-color: aliceblue;
    min-height: 700px;
    text-indent: 0;
    position: relative;
    left: 5px;
  }

  .main{
    float:left;
    width:70%;
    background-color: white;
    text-indent: 0;
    position: relative;
    left: 20px;
  }
}

/* Static Class <... class=xxx> attributes (.xxx) */

.footer{
  clear:both;
  height: 75px;
  width: 100%;
  text-align: center;
  background-color: aliceblue;
  font-size: 1em;
}

/* Define <... id="xxx"> attributes (#xxx) primarily used for specific styling, JavaScript interactions, or linking 
to a specific section within a page */